<template>
	<view class="Menu">
		<!-- 导航条 :style="{ height: $wanlshop.wanlsys().height + 'px' }"-->
		<view class="cu-custom">
			<view class="cu-bar fixed" style="background: #fff;"
				:style="{height: $wanlshop.wanlsys().height + 'px',paddingTop: $wanlshop.wanlsys().top + 'px',}">
				<view class="action">
					<text class="wlIcon-fanhui1" style="margin-left: 0" @tap="$wanlshop.back(1)"></text>
				</view>
				<view class="content" :style="{ top: $wanlshop.wanlsys().top + 'px' }">
					<!-- USDT充值 -->
					{{$t('otcRecharge.page.title')}}
				</view>
				<view class="action">
					<text class="wlIcon-gengduo" @tap="showModal('share')"></text>
				</view>
			</view>
		</view>
		<view style="position: fixed;height: auto;  width: auto; top: 0; left: 0; bottom: 0; right: 0;"
			:style="{top: $wanlshop.wanlsys().height + 'px',}">
			<view class="code">
				<view class="codeImg">
					<image :src="codeUrl+'.jpg'"></image>
				</view>
				<view class="address">
					<view class="dz">
						<!-- 充值地址 -->
						{{$t('otcRecharge.tips.rechargeAddress')}}:
						{{address}}
						<view>
							<image src="@/static/images/index/copy.png" @click="copy(address)"></image>
						</view>
					</view>
					<view>
						<!-- 充值网络 -->{{$t('otcRecharge.tips.rechargeNetwork')}}: USDT-BSC20
					</view>
				</view>
			</view>
			<view style="height: 20rpx; background: #f8f8f8;"></view>
			<view class="Tips">
				<h1><!-- 充值提示 -->{{$t('otcRecharge.tips.rechargeHint.title')}}</h1>
				<view v-html="html"></view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {

		data() {
			return {
				address: '',
				codeUrl: '',
				html: ''
			};
		},
		onShow() {
			this.usdtRecharge()
		},
		methods: {
			//充值
			usdtRecharge() {
				uni.request({
					url: "/wanlshop/otc/my/rechargeQrcode",
					method: 'POST',
					success: (res) => {
						if (res.res.code == 1) {
							this.address = res.res.data.address
							this.codeUrl = res.res.data.url
							this.html = res.res.data.desc
						}
					},
				});
			},
			copy(content) {
				// 复制内容，必须字符串，数字需要转换为字符串
				content = typeof content === 'string' ? content : content.toString();
				//#ifndef H5
				uni.setClipboardData({
					data: content,
					success: function() {
						uni.showToast({
							title: this.$t('otcRecharge.toast.copy.fail', {
								content
							}), //`复制成功 ${content}`,
							icon: 'none'
						});
					},
					fail: function() {
						uni.showToast({
							title: this.$t('otcRecharge.toast.copy.fail'), //`复制失败`,
							icon: 'none'
						});
					}
				});
				//#endif
				// #ifdef H5
				if (!document.queryCommandSupported('copy')) { //为了兼容有些浏览器 queryCommandSupported 的判断
					msg('浏览器不支持');
				}
				let textarea = document.createElement("textarea")
				textarea.value = content
				textarea.readOnly = "readOnly"
				document.body.appendChild(textarea)
				textarea.select() // 选择对象
				textarea.setSelectionRange(0, content.length) //核心
				let result = document.execCommand("copy") // 执行浏览器复制命令
				if (result) {
					uni.showToast({
						title: this.$t('otcRecharge.toast.copy.success', {
							content
						}), //`复制成功 ${content}`,
						icon: 'none'
					});
				} else {
					uni.showToast({
						title: this.$t('otcRecharge.toast.copy.fail'), //`复制失败`,
						icon: 'none'
					});
				}
				textarea.remove()
				// #endif
			},
		}
	};
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.Menu {

		.code {
			padding: 108rpx 0 60rpx 0;
			background: #fff;

			.codeImg {
				width: 300rpx;
				height: 300rpx;
				border: 6rpx solid #327CFF;
				margin: 0 auto;
				overflow: hidden;
				margin-bottom: 120rpx;

				uni-image {
					width: 290rpx;
					height: 290rpx;
				}
			}

			.address {
				font-size: 24rpx;
				color: #666666;
				padding: 0 20rpx 0 50rpx;

				.dz {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;

					uni-image {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
		}

		.Tips {
			background: #fff;
			padding: 0 24rpx 100rpx 24rpx;

			h1 {
				width: 224rpx;
				height: 100rpx;
				background: url('../../static/images/otc/bg.png') center no-repeat;
				background-size: cover;
				margin: 0 auto;
				font-size: 28rpx;
				color: #333333;
				text-align: center;
				line-height: 100rpx;
			}

			p {
				font-size: 28rpx;
				color: #666666;
				line-height: 56rpx;
			}
		}
	}
</style>